<template>
  <div class="wrap">
    <!-- header头部 -->
    <!-- <m-header
      :activeIndex="2"
      :backcolor="'#1968FA'"
      :color="'#fff'"
      opacity="1"
      hocolor="#fff"
      filter="blur(0px)"
      :islogin="false"
    ></m-header> -->
    <div style="height: 50px"></div>
    <div
      class="time-down"
      :style="
        isSkill == '/skills'
          ? `background: url(${time_back_fb})`
          : `background: url(${time_back})`
      "
    >
      <div>
        {{ countDown }}
      </div>
    </div>
    <div class="container" style="width: 100%; max-width: 1200px">
      <el-page-header
        :title="'退出'"
        @back="goBack"
        :content="zongtimuList.templateName"
      >
      </el-page-header>
      <div class="subject">
        <el-row :gutter="20">
          <el-col :sm="15">
            <div class="left-content">
              <p
                style="
                  background: #eaf1ff;
                  padding: 20px 30px;
                  font-size: 16px;
                  color: #333333;
                  font-weight: bold;
                "
              >
                {{ sujectType }}
              </p>
              <div ref="scrollMenuRef" class="scrollMenuBox">
                <div class="subbox-box">
                  <div>
                    <span class="tihao">{{ questionNumcopy + 1 }}</span>
                    <span style="margin-left: 10px">{{
                      timuList.topicContent
                    }}</span>
                  </div>
                  <div class="subbox" v-if="sujectType != '多选题'">
                    <div
                      class="options"
                      v-for="(item, index) in this.timuList.options"
                      :key="index"
                      @click="handleOptionTrue(item)"
                    >
                      <div
                        :class="`${
                          isOptuionSelcet == timuListCopy.options[index] ||
                          isOptuionSelcet == item
                            ? 'option is-option-select'
                            : 'option'
                        }`"
                      >
                        {{ item.split("、")[0] }}
                      </div>
                      <div style="max-width: 560px; word-break: break-all">
                        {{  splitFirst(item,'、')[1] }}
                      </div>
                    </div>
                  </div>
                  <!-- 多选框 -->
                  <div class="subbox" v-else>
                    <el-checkbox-group
                      class="check-options"
                      v-model="checkList"
                    >
                      <el-checkbox
                        @change="(value) => handleCheckedChange(value, item)"
                        style="margin-bottom: 20px"
                        v-for="(item, index) in this.timuList.options"
                        :label="item.split('、')[0]"
                        :key="index"
                        >{{ item }}</el-checkbox
                      >
                    </el-checkbox-group>
                    <!-- <div
                      class="options"
                      v-for="(item, index) in this.timuList.options"
                      :key="index"
                      @click="handleOptionTrue(item)"
                    >
                      <div
                        :class="`${
                          isOptuionSelcet == timuListCopy.options[index] ||
                          isOptuionSelcet == item
                            ? 'check-option is-checkbox-select'
                            : 'check-option'
                        }`"
                      >
                        {{ item.split("、")[0] }}
                      </div>
                      <div>{{ item.split("、")[1] }}</div>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
            <div class="nextlast-box">
              <div class="btn-box">
                <el-button class="last-btn" @click="handleNextQuestion('last')"
                  >上一题</el-button
                >
                <el-button class="next-btn" @click="handleNextQuestion('next')"
                  >下一题</el-button
                >
              </div>
            </div>
            <div class="submit">
              <el-button type="primary" @click="handleIsSubmit(true, 1)"
                >交 卷</el-button
              >
            </div>
          </el-col>
          <!-- 答题卡 -->
          <el-col :sm="9">
            <div class="right-content">
              <div class="datika">答题卡</div>
              <div class="tip">
                <div style="display: flex"><span class="yizuo"></span>已做</div>
                <div style="display: flex"><span class="wei"></span>未做</div>
              </div>
              <div class="option">
                <div class="qus-type">单选题</div>
                <div class="medium">
                  <div
                    v-for="(item, index) in danxuanList"
                    :key="item.id"
                    @click="
                      handleCheckQusetion(index, item, danxuanList, '单选题')
                    "
                  >
                    <div
                      class="op-box op-box-blue"
                      v-if="answerList[item.id]"
                      :style="
                        isSelect == item.id ? 'border:1px solid blue' : ''
                      "
                    >
                      {{ index + 1 }}
                    </div>
                    <div
                      v-else
                      class="op-box"
                      :style="
                        isSelect == item.id ? 'border:1px solid blue' : ''
                      "
                    >
                      {{ index + 1 }}
                    </div>
                  </div>
                </div>
                <div class="qus-type">多选题</div>
                <div class="medium">
                  <div
                    v-for="(item, index) in duoxuanList"
                    :key="item.id"
                    @click.prevent="
                      handleCheckQusetion(index, item, duoxuanList, '多选题')
                    "
                  >
                    <div
                      class="op-box op-box-blue"
                      v-if="answerList[item.id]"
                      :style="
                        isSelect == item.id ? 'border:1px solid blue' : ''
                      "
                    >
                      {{ index + 1 + danxuanList.length }}
                    </div>
                    <div
                      v-else
                      class="op-box"
                      :style="
                        isSelect == item.id ? 'border:1px solid blue' : ''
                      "
                    >
                      {{ index + 1 + danxuanList.length }}
                    </div>
                  </div>
                </div>
                <div class="qus-type">判断题</div>
                <div class="medium">
                  <div
                    v-for="(item, index) in panduanList"
                    :key="item.id"
                    @click.prevent="
                      handleCheckQusetion(index, item, panduanList, '判断题')
                    "
                  >
                    <div
                      class="op-box op-box-blue"
                      v-if="answerList[item.id]"
                      :style="
                        isSelect == item.id ? 'border:1px solid blue' : ''
                      "
                    >
                      {{ index + 1 + danxuanList.length + duoxuanList.length }}
                    </div>
                    <div
                      v-else
                      class="op-box"
                      :style="
                        isSelect == item.id ? 'border:1px solid blue' : ''
                      "
                    >
                      {{ index + 1 + danxuanList.length + duoxuanList.length }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- footer页脚 -->
  </div>
</template>

<script>
import time_back from "../../assets/images/timeback.png";
import time_back_fb from "../../assets/images/time_back_fb.png";
import { STATUS_CODE_OK } from "@/config";
import { getExamination, submitPaper } from "@/api/questionBank";
// import MHeader from "@/components/MHeader.vue";
// import MFotter from "@/components/MFotter.vue";
export default {
  data() {
    return {
      time_back,
      time_back_fb,
      checkoptionlist: {},
      checkList: [],
      sujectType: "", // 题目类型
      mubiaoArray: [], //过渡数组-逻辑
      isOptuionSelcet: "", // 是否作答
      isSelect: "", // 是否点击答题卡
      timuList: {}, // 题目数据
      timuListCopy: {}, // 题目数据-副本
      answer: {}, // 答案提交数据
      answerList: {}, // 答案数据-本地
      questionNum: 1, // 题号
      questionNumcopy: 0, // 题号-副本
      panduanList: [], // 判断题
      duoxuanList: [], // 多选题
      danxuanList: [], // 单选题
      datalist: {}, // 路由数据-考试信息
      timer: null, // 计时器
      countDownTime: 3600, // 倒计时时间
      isPush: false,
      wznum: "", // 没做完题数
      zongtimuList: [],
      submitState: 0,
      isSubmitTrue: false,
      isSkill: "", // 是否为技能培训试卷
    };
  },
  async created() {
    // 获取本地数据
    await this.handleGetData();
    this.isSkill = sessionStorage.getItem("goback");
    await this.handleGetExamination();
    // if (!localStorage.getItem(`danxuanList${this.$store.state.userData.id}`)) {
    //   await this.handleGetExamination();
    // } else {
    //   if (
    //     JSON.parse(
    //       localStorage.getItem(`answerList${this.$store.state.userData.id}`)
    //     )
    //   ) {
    //     this.answerList = JSON.parse(
    //       localStorage.getItem(`answerList${this.$store.state.userData.id}`)
    //     );
    //   }
    //   this.panduanList = JSON.parse(
    //     localStorage.getItem(`panduanList${this.$store.state.userData.id}`)
    //   );
    //   this.duoxuanList = JSON.parse(
    //     localStorage.getItem(`duoxuanList${this.$store.state.userData.id}`)
    //   );
    //   this.danxuanList = JSON.parse(
    //     localStorage.getItem(`danxuanList${this.$store.state.userData.id}`)
    //   );
    // }

    this.handleCheckQusetion(
      0,
      this.danxuanList[0],
      this.danxuanList,
      "单选题"
    );
    if (localStorage.getItem("countDownTime")) {
      this.countDownTime = JSON.parse(localStorage.getItem("countDownTime"));
    }
    //初始化时读取sessionStorage中储存的数据,有就设置为countDownTime,没有就根据自己逻辑设置countDownTime
    if (window.localStorage.getItem("countDownTime") == null) {
      this.handleStartCountDown(true);
    } else {
      this.countDownTime = Number(window.localStorage.getItem("countDownTime"));
      this.handleStartCountDown(true);
    }
  },
  mounted() {
    window.addEventListener("beforeunload", this.onBeforeUnload);
  },
  beforeDestroy() {
    window.removeEventListener("beforeunload", this.onBeforeUnload);
    localStorage.removeItem(`danxuanList${this.$store.state.userData.id}`);
    clearInterval(this.timer);
    localStorage.removeItem("countDownTime");
    if (!this.isSubmitTrue) {
      this.handleSubmitPaper(false, this.submitState);
    }
  },
  computed: {
    // 计算属性自动计算countDownTime,并转换为倒计时
    countDown() {
      const hour = parseInt((this.countDownTime / 60 / 60) % 24);
      const minutes = parseInt((this.countDownTime / 60) % 60);
      const seconds = parseInt(Number(this.countDownTime) % 60);
      const h = hour < 10 ? "0" + hour : hour;
      const m = minutes < 10 ? "0" + minutes : minutes;
      const s = seconds < 10 ? "0" + seconds : seconds;
      return `${h}:${m}:${s}`;
    },
  },

  methods: {
    // 只切割第一个字符串
    splitFirst(str, delimiter) {
      const index = str.indexOf(delimiter);
      if (index === -1) {
        return [str]; // 如果没有找到分隔符，则返回原字符串
      }
      return [str.slice(0, index), str.slice(index + delimiter.length)];
    },
    onBeforeUnload(event) {
      const message = "您有未保存的更改，确定要离开吗？";
      event.returnValue = message; // 兼容性设置
      return message; // 兼容性设置
    },
    handleCountData() {
      // 倒计时时间存储
      if (localStorage.getItem("countDownTime")) {
        localStorage.setItem("countDownTime", this.countDownTime);
      }
    },
    // 多选题选择
    handleCheckedChange(value, item) {
      if (value) {
        this.checkoptionlist[this.timuList.id] += item.split("、")[0];
        this.answerList[this.timuList.id] = this.checkoptionlist[
          this.timuList.id
        ]
          .split("undefined")[1]
          .split("")
          .sort()
          .join("");
      } else {
        let obj = JSON.parse(
          localStorage.getItem(`answerList${this.$store.state.userData.id}`)
        );
        for (let key in obj) {
          if (key == this.timuList.id) {
            this.checkoptionlist[this.timuList.id] = "undefined" + obj[key];
            break;
          }
        }
        if (this.checkoptionlist[this.timuList.id]) {
          this.checkoptionlist[this.timuList.id] = this.checkoptionlist[
            this.timuList.id
          ].replace(item.split("、")[0], "");
          this.answerList[this.timuList.id] = this.checkoptionlist[
            this.timuList.id
          ]
            .split("undefined")[1]
            .split("")
            .sort()
            .join("");
        }
      }
      localStorage.setItem(
        `answerList${this.$store.state.userData.id}`,
        JSON.stringify(this.answerList)
      );
    },
    // 点击提交
    async handleIsSubmit(isPush, state) {
      this.submitState = state;
      let arr = [];
      let obj = JSON.parse(
        localStorage.getItem(`answerList${this.$store.state.userData.id}`)
      );
      for (let key in obj) {
        if (obj[key] != "") {
          arr.push(key);
        }
      }
      this.wznum =
        this.panduanList.length +
        this.duoxuanList.length +
        this.danxuanList.length -
        arr.length;
      try {
        let msg =
          this.wznum == "0"
            ? "确认交卷？"
            : `您还有${this.wznum}道题未作答,是否交卷?`;
        await this.$confirm(msg, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        this.handleSubmitPaper(isPush, 1);
      } catch {
        console.log("取消");
      }
    },
    // 交卷 level: 1初 2中 3高
    async handleSubmitPaper(isPush, isSubmit) {
      this.isPush = isPush;
      this.answer = this.answerList;
      let dataArrList = [];
      for (let key in this.answer) {
        dataArrList.push({
          id: key,
          value: this.answer[key],
        });
      }
      let level = "";
      if (this.datalist.grade == "初级") {
        level = 1;
      }
      if (this.datalist.grade == "中级") {
        level = 2;
      }
      if (this.datalist.grade == "高级") {
        level = 3;
      }
      let { data } = await submitPaper({
        paperId: this.datalist.templateId,
        paperTitle: this.datalist.templateName,
        questionAnswerList: JSON.stringify(dataArrList),
        level: level,
        isSubmit: isSubmit,
        practiceRecordId: JSON.parse(
          localStorage.getItem(`practiceId${this.$store.state.userData.id}`)
        ),
        examinationTime: "1970-01-01 " + this.countDown,
      });
      if (data.code == STATUS_CODE_OK) {
        this.isSubmitTrue = true;
        localStorage.setItem(
          `completed${this.$store.state.userData.id}`,
          JSON.stringify(data.data)
        );
        localStorage.setItem(
          `practiceId${this.$store.state.userData.id}`,
          JSON.stringify(data.data.practiceRecordId)
        );
        this.handleCloseCountDown("交卷成功！", isPush);
      }
    },
    // 答题选项
    handleOptionTrue(item) {
      this.isOptuionSelcet = JSON.parse(JSON.stringify(item));
      this.answerList[this.timuList.id] = JSON.parse(
        JSON.stringify(item)
      ).split("、")[0];
      localStorage.setItem(
        `answerList${this.$store.state.userData.id}`,
        JSON.stringify(this.answerList)
      );
    },
    // 答题卡选项
    handleCheckQusetion(index, item = {}, arr = [], type) {
      // index题号 item单题 arr题目集合 type题目类型
      if (arr.length < 1) {
        return false;
      }
      this.sujectType = type;
      this.questionNumcopy = index;
      if (this.sujectType == "多选题") {
        this.checkList = [];
        this.questionNumcopy = index + this.danxuanList.length;
        if (
          localStorage.getItem(`answerList${this.$store.state.userData.id}`)
        ) {
          this.answerList = JSON.parse(
            localStorage.getItem(`answerList${this.$store.state.userData.id}`)
          );
          for (let key in this.answerList) {
            if (key == item.id) {
              this.answerList[key].split("").forEach((item) => {
                this.checkList.push(item);
              });
            }
          }
        }
      }
      if (this.sujectType == "判断题") {
        this.questionNumcopy =
          index + this.danxuanList.length + this.duoxuanList.length;
      }
      if (arr.length >= 1) {
        this.mubiaoArray = arr;
      }
      this.isOptuionSelcet = this.answerList[item.id];
      this.questionNum = index;
      this.timuList = item;
      this.isSelect = item.id;
      if (typeof this.timuList.options != "object") {
        this.timuList.options = this.timuList.options.split(";;");
      }
      this.timuListCopy = JSON.parse(JSON.stringify(item));
      this.timuListCopy.options.forEach((item, eindex) => {
        this.timuListCopy.options.splice(eindex, 1, item.split("、")[0]);
      });
    },

    // 上一题下一题
    async handleNextQuestion(type) {
      let arr = [];
      if (this.sujectType == "单选题") {
        arr = this.danxuanList;
      }
      if (this.sujectType == "多选题") {
        arr = this.duoxuanList;
      }
      if (this.sujectType == "判断题") {
        arr = this.panduanList;
      }

      if (type == "last") {
        if (this.questionNum < 1 && this.sujectType == "单选题") {
          this.questionNum = 1;
          return;
        }
        if (this.questionNum == 0 && this.sujectType == "多选题") {
          this.sujectType = "单选题";
          this.questionNum = this.danxuanList.length - 1;
          this.handleCheckQusetion(
            this.questionNum,
            this.danxuanList[this.questionNum],
            this.danxuanList,
            this.sujectType
          );
          return;
        } else if (this.questionNum == 0 && this.sujectType == "判断题") {
          this.sujectType = "多选题";
          this.questionNum = this.duoxuanList.length - 1;
          this.handleCheckQusetion(
            this.questionNum,
            this.duoxuanList[this.questionNum],
            this.duoxuanList,
            this.sujectType
          );
        } else {
          this.questionNum -= 1;
          this.handleCheckQusetion(
            this.questionNum,
            this.mubiaoArray[this.questionNum],
            arr,
            this.sujectType
          );
        }
      } else {
        if (
          this.questionNum > this.mubiaoArray.length - 2 &&
          this.sujectType == "判断题"
        ) {
          return;
        } else if (
          this.sujectType == "单选题" &&
          this.questionNum == this.mubiaoArray.length - 1
        ) {
          if (this.duoxuanList.length < 1) {
            return false;
          }
          this.sujectType = "多选题";
          this.questionNum = 0;

          this.handleCheckQusetion(
            this.questionNum,
            this.duoxuanList[this.questionNum],
            this.duoxuanList,
            this.sujectType
          );
          return;
        } else if (
          this.sujectType == "多选题" &&
          this.questionNum == this.mubiaoArray.length - 1
        ) {
          if (this.panduanList.length < 1) {
            return false;
          }
          this.sujectType = "判断题";
          this.questionNum = 0;
          this.handleCheckQusetion(
            this.questionNum,
            this.panduanList[this.questionNum],
            this.panduanList,
            this.sujectType
          );
        } else {
          this.questionNum += 1;
          this.handleCheckQusetion(
            this.questionNum,
            this.mubiaoArray[this.questionNum],
            arr,
            this.sujectType
          );
        }
      }
    },
    // 退出
    async goBack() {
      this.submitState = 0;
      let arr = [];
      let obj = JSON.parse(
        localStorage.getItem(`answerList${this.$store.state.userData.id}`)
      );
      for (let key in obj) {
        if (obj[key] != "") {
          arr.push(key);
        }
      }
      this.wznum =
        this.panduanList.length +
        this.duoxuanList.length +
        this.danxuanList.length -
        arr.length;
      let msg =
        this.wznum == "0"
          ? "是否退出练习?"
          : `您还有${this.wznum}道题未作答,是否退出练习?`;
      try {
        await this.$confirm(msg, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        clearInterval(this.timer);
        this.handleSubmitPaper(false, 0);
        this.handleCountData();
        this.$router.push(sessionStorage.getItem("goback"));
      } catch {
        console.log("取消");
      }
    },
    // 获取本地基本详情数据
    handleGetData() {
      if (this.$route.params.row) {
        sessionStorage.setItem(
          "question",
          JSON.stringify(this.$route.params.row)
        );
      }
      this.datalist = JSON.parse(sessionStorage.getItem("question"));
    },

    // 获取题目
    async handleGetExamination() {
      let allocationId = JSON.parse(sessionStorage.getItem("resDetailData")).id;
      let { data } = await getExamination({
        templateName: this.datalist.title,
        templateId: this.datalist.templateId,
        templateType: this.datalist.templateType == "理论考试" ? 0 : 1,
        grade: this.datalist.grade,
        allocationId: allocationId,
      });
      // if (data.code == 40000) {
      //   this.$router.push("/questionbank/continue");
      //   return false;
      // }
      if (data.code == STATUS_CODE_OK) {
        // zongtimuList 交卷时把这个整体数据传给后端 教师练习不做记录
        this.zongtimuList = data.data;
        this.panduanList = data.data.judge;
        this.duoxuanList = data.data.multiple;
        this.danxuanList = data.data.single;
        this.countDownTime = data.data.duration * 60;
        this.danxuanList.forEach((item) => {
          item.isselect = false;
        });
        localStorage.setItem(
          `practiceId${this.$store.state.userData.id}`,
          JSON.stringify(data.data.practiceRecordId)
        );
        localStorage.setItem(
          `zongtimuList${this.$store.state.userData.id}`,
          JSON.stringify(this.zongtimuList)
        );
        localStorage.setItem(
          "countDownTime",
          JSON.stringify(this.countDownTime)
        );
        localStorage.setItem(
          `panduanList${this.$store.state.userData.id}`,
          JSON.stringify(this.panduanList)
        );
        localStorage.setItem(
          `duoxuanList${this.$store.state.userData.id}`,
          JSON.stringify(this.duoxuanList)
        );
        localStorage.setItem(
          `danxuanList${this.$store.state.userData.id}`,
          JSON.stringify(this.danxuanList)
        );
        localStorage.setItem("isSubmit", JSON.stringify(true));
      }
    },

    // //考试倒计时///////////////////////////////////////////////////////////////////////////////////
    // // 开始考试
    handleStartCountDown(isResh = false) {
      // isResh为true重新考试
      if (isResh) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        if (this.countDownTime <= 0) {
          //当监测到countDownTime为0时,清除计数器并且移除sessionStorage,然后执行提交试卷逻辑
          clearInterval(this.timer);
          localStorage.removeItem("countDownTime");
          this.handleSubmitPaper(true, 1);
        } else if (this.countDownTime > 0) {
          //每秒让countDownTime -1秒,并设置到sessionStorage中
          this.countDownTime--;
          localStorage.setItem("countDownTime", this.countDownTime);
        }
      }, 1000);
    },
    // 交卷
    handleCloseCountDown(message) {
      clearInterval(this.timer);
      localStorage.removeItem("countDownTime");
      if (this.isPush) {
        this.isSelfSub = true;
        localStorage.removeItem(`answerList${this.$store.state.userData.id}`);
        localStorage.removeItem(`panduanList${this.$store.state.userData.id}`);
        localStorage.removeItem(`duoxuanList${this.$store.state.userData.id}`);
        localStorage.removeItem(`danxuanList${this.$store.state.userData.id}`);
        //  已经答完
        let time = "1970-01-01 " + this.countDown;
        if (
          time == "1970-01-01 00:00:00" &&
          this.$store.state.userData.type != "1"
        ) {
          this.$message({
            message: "时间已到,自动交卷!",
            type: "success",
          });
          this.$router.push("/questionbank/completed");
          return;
        }
        if (this.wznum == 0) {
          // 不是老师
          if (this.$store.state.userData.type != "1") {
            const loading = this.$loading({
              text: message,
              lock: true,
              background: "rgba(0, 0, 0, 0.7)",
            });
            setTimeout(() => {
              loading.close();
              this.$router.push("/questionbank/completed");
            }, 2000);
            return;
          } else {
            let url = sessionStorage.getItem("goback");
            const loading = this.$loading({
              text: message,
              lock: true,
              background: "rgba(0, 0, 0, 0.7)",
            });
            setTimeout(() => {
              loading.close();
              this.$router.push(url);
            }, 2000);
            return;
          }
        }
        // 未答完
        if (this.wznum != 0) {
          if (this.$store.state.userData.type != "1") {
            this.$router.push("/questionbank/completed");
            return;
          } else {
            let url = sessionStorage.getItem("goback");
            this.$router.push(url);
            return;
          }
        }
      }

      // if (this.wznum == 0) {
      //   localStorage.removeItem("countDownTime");
      //   if (this.isPush) {
      //     localStorage.removeItem(`answerList${this.$store.state.userData.id}`);
      //     this.$message({
      //       message: message,
      //       type: "success",
      //     });
      //     this.$router.push("/questionbank/completed");
      //   }
      // } else {
      //   clearInterval(this.timer);
      //   this.handleCountData();
      //   sessionStorage.getItem("goback");
      // }
    },
  },
  // components: {
  //   MHeader,
  //   MFotter,
  // },
};
</script>
<style lang="scss" scoped>
::v-deep .el-loading-text {
  font-size: 20px !important;
}
::v-deep .el-row {
  width: 100%;
}
.el-page-header {
  background: #fff;
  padding: 10px;
}
::v-deep .el-page-header__title {
  line-height: 23px !important;
  width: 60px !important;
  text-align: center;
  height: 26px !important;
  color: #ff9500;
  /* line-height: 43px; */
  border-radius: 20px;
  border: 1px solid #ff9500;
}
::v-deep .el-page-header__left .el-icon-back {
  display: none;
}
::v-deep .is-option-select {
  background: #1968fa !important;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #1968fa !important;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1968fa !important;
}
::v-deep .el-checkbox-button {
  position: relative;
  margin: 0px 10px !important;
}
::v-deep .el-checkbox__label {
  vertical-align: text-top;
  white-space: normal;
  word-break: break-all;
  max-width: 650px;
}
::v-deep .el-checkbox__label {
  color: #000;
}
::v-deep .el-checkbox-button__inner {
  border: 1px solid #8d9399;
  color: #8d9399 !important;
  text-align: none !important;
  box-sizing: border-box !important;
  margin: 0px !important;
  transition: none !important;
  padding: 0px !important;
  border-radius: none !important;
  display: flex !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  width: 30px !important;
  height: 30px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  border-radius: 0 !important;
}
::v-deep .el-page-header__title {
  width: 30px;
  line-height: 43px;
}
::v-deep .el-page-header__left {
  margin-right: -44px;
  align-items: center;
}

::v-deep .el-page-header__content {
  font-size: 22px;
  color: #333;
  text-align: center;
  // width: 1200px;
  margin: 0px auto;
  line-height: 43px;
}
.time-down {
  width: 100%;
  max-width: 1200px;
  color: #fff;
  font-weight: bold;
  font-size: 26px;
  background: url("../../assets/images/timeback.png");
  margin: 10px auto;
  padding: 20px;
  text-align: center;
}
.subject {
  .submit {
    background: #fff;
    padding: 20px 0px;
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 20px;
    .el-button {
      width: 300px;
    }
  }
  .nextlast-box {
    margin: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 72px;
    background: #fff;
    .btn-box {
      .el-button {
        border: 1px solid #409eff;
        color: #409eff;
      }
      .last-btn {
        width: 160px;
        margin: 0px 30px;
      }
      .next-btn {
        width: 160px;
        margin: 0px 30px;
      }
    }
  }
  background: #eee;
  .left-content {
    background: #fff;
  }
  .right-content {
    min-height: 620px;
    padding: 15px 0px;
    .tip {
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 20px;
      .yizuo {
        background: #1968fa;
        width: 20px;
        height: 20px;
        border-radius: 2px;
        display: inline-block;
        margin-right: 10px;
      }
      .wei {
        margin-right: 10px;
        background: #fff;
        width: 20px;
        height: 20px;
        border-radius: 2px;
        display: inline-block;
        border: 1px solid #8d9399;
      }
    }
    .datika {
      font-size: 18px;
      color: #333;
      font-weight: bold;
      padding: 20px 0px;
      margin: 0px 30px;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;
      box-sizing: border-box;
    }
    background: #fff;
    margin-top: 10px;
    .option {
      margin: 0px 30px;
      max-height: 464px;
      overflow-y: auto;
      .medium {
        display: flex;
        flex-wrap: wrap;
        .op-active {
          border: 1px solid #1968fa;
          color: #fff !important;
        }
        .op-box-blue {
          background: #1968fa;
          color: #fff !important;
        }
        .op-box {
          color: #8d9399;
          cursor: pointer;
          width: 30px;
          height: 30px;
          border: 1px solid #8d9399;
          margin: 10px;
          text-align: center;
          line-height: 30px;
        }
      }
      .qus-type {
        font-size: 14px;
        font-weight: bold;
        margin-top: 20px;
      }
    }
  }
}
/*el-scrollbar 必须指定高度*/
.scrollMenuBox {
  height: 344px;
  padding: 10px 23px 0px;
  .subbox-box {
    font-size: 16px;
    margin: 10px;
    .subbox {
      margin-top: 20px;
      margin-left: 60px;
      .check-options {
        padding: 10px 0px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
      }
      .options {
        padding: 10px 0px;
        font-size: 14px;
        display: flex;
        align-items: center;
        .is-option-select {
          background: #409eff;
          color: #fff;
          border: 1px solid #fff !important;
        }
        .is-checkbox-select {
          background: #409eff;
          color: #fff;
          border: 1px solid #fff !important;
        }
        .check-option {
          width: 25px;
          height: 25px;
          display: inline-block;
          border: 1px solid #73797f;
          text-align: center;
          line-height: 18px;
          font-size: 12px;
          margin-right: 10px;
        }
        .option {
          width: 25px;
          height: 25px;
          display: inline-block;
          border: 1px solid #73797f;
          text-align: center;
          line-height: 23px;
          border-radius: 100px;
          font-size: 12px;
          margin-right: 10px;
        }
      }
    }
  }
}
.tihao {
  display: inline-block;
  width: 19px;
  height: 30px;
  text-align: center;
  line-height: 25px;
  color: #fff;
  font-size: 12px;
  background: url("../../assets/images/tihao.png") 100% no-repeat;
}
</style>
